<template>
  <div class="mainBodySelect">
    <template v-if="!viewShow">
      <template v-if="!isEcho">
        <!--不展示标题的-->
        <div v-if="!showLabel" class="noLabel">
          <!--选择项目-->
          <div v-if="parameters === 'deal'">
            <el-select
              :value="sLabel"
              :disabled="disabled"
              filterable
              remote
              :size="size"
              :clearable="clearable"
              :placeholder="$t(placeholder)"
              :style="{ width: width }"
              :loading="selectLoading"
              :remote-method="remoteMethodDeal"
              @change="dataChange($event)"
            >
              <el-option
                v-for="item in dataList"
                :key="item.id"
                :label="item.dealName"
                :value="item.id"
              />
            </el-select>
          </div>
          <!--选择管理人-->
          <div v-else-if="parameters === 'manager'">
            <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
              <el-option
                v-for="item in dataList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <!-- 合伙企业 -->
          <div v-else-if="parameters === 'hhqy'">
            <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
              <el-option
                v-for="item in dataList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div v-else-if="parameters === 'fund'">
            <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
              <el-option
                v-for="item in dataList"
                :key="item.id"
                :label="item.fundName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div v-else-if="parameters === 'subFund'">
            <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
              <el-option
                v-for="item in dataList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
            </el-select>
          </div>
          <div v-else-if="parameters === 'spv'">
            <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
              <el-option
                v-for="item in dataList"
                :key="item.id"
                :label="item.fundName"
                :value="item.id"
              />
            </el-select>
          </div>
          <!-- 出资人 -->
          <div v-else-if="parameters === 'lpInvestor'">
            <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
              <el-option
                v-for="item in dataList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
            </el-select>
          </div>
          <!-- 内部机构 -->
          <div v-else-if="parameters === 'internal'">
            <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
              <el-option
                v-for="item in dataList"
                :key="item.id"
                :label="item.interFullName"
                :value="item.id"
              />
            </el-select>
          </div>
          <!-- 中介机构 -->
          <div v-else-if="parameters === 'mediation'">
            <el-select :value="sLabel" :disabled="disabled" filterable clearable :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
              <el-option
                v-for="item in dataList"
                :key="item.id"
                :label="item.mediationName"
                :value="item.id"
              />
            </el-select>
          </div>
          <!-- 外部专家 -->
          <div v-else-if="parameters === 'experts'">
            <el-select :value="sLabel" :disabled="disabled" filterable clearable :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
              <el-option
                v-for="item in dataList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <!--管理人(内部加外部)-->
          <div v-else-if="parameters === 'managerAll'">
            <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
              <el-option
                v-for="item in dataList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div v-else>
            <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
              <el-option
                v-for="item in dataList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
            </el-select>
          </div>
        </div>
        <!--展示标题-->
        <template v-if="showLabel">
          <template v-if="parameters === 'deal'">
            <el-form-item :label="$t('项目名称')" :prop="svalue">
              <span slot="label">
                <i v-if="requiredLogo" style="color: #ff4949;margin-right: 4px;">*</i>
                {{ $t('项目名称') }}
              </span>
              <el-select
                :value="sLabel"
                :disabled="disabled"
                filterable
                remote
                :size="size"
                :clearable="clearable"
                :placeholder="$t(placeholder)"
                :style="{ width: width }"
                :loading="selectLoading"
                :remote-method="remoteMethodDeal"
                @change="dataChange($event)"
              >
                <el-option
                  v-for="item in dataList"
                  :key="item.id"
                  :label="item.dealName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </template>
          <template v-else-if="parameters === 'manager'">
            <el-form-item :label="$t('管理人')" :prop="svalue">
              <span slot="label">
                <i v-if="requiredLogo" style="color: #ff4949;margin-right: 4px;">*</i>
                {{ $t('管理人') }}
              </span>
              <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
                <el-option
                  v-for="item in dataList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </template>
          <template v-else-if="parameters === 'fund'">
            <el-form-item :prop="svalue">
              <span slot="label">
                <i v-if="requiredLogo" style="color: #ff4949;margin-right: 4px;">*</i>
                {{ $t('基金名称') }}
              </span>
              <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
                <el-option
                  v-for="item in dataList"
                  :key="item.id"
                  :label="item.fundName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </template>
          <template v-else-if="parameters === 'hhqy'">
            <el-form-item :label="$t('合伙企业')" :prop="svalue">
              <span slot="label">
                <i v-if="requiredLogo" style="color: #ff4949;margin-right: 4px;">*</i>
                {{ $t('合伙企业') }}
              </span>
              <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
                <el-option
                  v-for="item in dataList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </template>
          <template v-else-if="parameters === 'subFund'">
            <el-form-item :prop="svalue">
              <span slot="label">
                <i v-if="requiredLogo" style="color: #ff4949;margin-right: 4px;">*</i>
                {{ $t('子基金名称') }}
              </span>
              <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
                <el-option
                  v-for="item in dataList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </template>
          <template v-else-if="parameters === 'spv'">
            <el-form-item :prop="svalue">
              <span slot="label">
                <i v-if="requiredLogo" style="color: #ff4949;margin-right: 4px;">*</i>
                {{ $t('SPV') }}
              </span>
              <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
                <el-option
                  v-for="item in dataList"
                  :key="item.id"
                  :label="item.fundName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </template>
          <template v-else-if="parameters === 'lpInvestor'">
            <el-form-item :prop="svalue">
              <span slot="label">
                <i v-if="requiredLogo" style="color: #ff4949;margin-right: 4px;">*</i>
                {{ $t('出资人') }}
              </span>
              <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
                <el-option
                  v-for="item in dataList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </template>
          <template v-else-if="parameters === 'internal'">
            <el-form-item :label="$t('内部机构')" :prop="svalue">
              <span slot="内部机构">
                <i v-if="requiredLogo" style="color: #ff4949;margin-right: 4px;">*</i>
                {{ $t('合伙企业') }}
              </span>
              <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
                <el-option
                  v-for="item in dataList"
                  :key="item.id"
                  :label="item.interFullName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </template>
          <!-- 中介机构 -->
          <template v-else-if="parameters === 'mediation'">
            <el-form-item :label="$t('中介机构')" :prop="svalue">
              <span slot="中介机构">
                <i v-if="requiredLogo" style="color: #ff4949;margin-right: 4px;">*</i>
                {{ $t('中介机构') }}
              </span>
              <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
                <el-option
                  v-for="item in dataList"
                  :key="item.id"
                  :label="item.mediationName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </template>
          <!-- 外部专家 -->
          <template v-else-if="parameters === 'experts'">
            <el-form-item :label="$t('外部专家')" :prop="svalue">
              <span slot="外部专家">
                <i v-if="requiredLogo" style="color: #ff4949;margin-right: 4px;">*</i>
                {{ $t('外部专家') }}
              </span>
              <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
                <el-option
                  v-for="item in dataList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </template>
          <!-- 管理人（内部加外部） -->
          <template v-else-if="parameters === 'managerAll'">
            <el-form-item :label="$t('管理人')" :prop="svalue">
              <span slot="label">
                <i v-if="requiredLogo" style="color: #ff4949;margin-right: 4px;">*</i>
                {{ $t('管理人') }}
              </span>
              <el-select :value="sLabel" :disabled="disabled" filterable :size="size" :clearable="clearable" :placeholder="$t(placeholder)" :style="{ width: width }" @change="dataChange($event)">
                <el-option
                  v-for="item in dataList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </template>
        </template>
      </template>
      <template v-if="isEcho && sLabel">
        {{ $t(sLabel) }}
      </template>
    </template>
    <template v-else>
      {{ $t(sLabel) }}
    </template>
  </div>
</template>

<script>
  import { findDealLimit, getDealBase } from '@/api/base/deal/dealBase'
  import { findFundFof, getFundBase } from '@/api/fund/fundBase'
  import { findGp, getGpBase, findGpAll } from '@/api/fund/gp/gpBase'
  import { findHhqy, getHhqyBase } from '@/api/hhqy/base/hhqyBase'
  import { findLpList, getLpBase } from '@/api/fund/lpBase/lpBase'
  import { findInternal, getInternalBase } from '@/api/fund/internal/internalBase'
  import { findSpvFund } from '@/api/fund/fundBase.js'
  import { findMediation, getByIdMainBody } from '@/api/deal/mediation/mediationBase'
  import { findExperts, getExpertsBase } from '@/api/deal/experts/expertsBase'
  export default {
  props: {
    size: {
      type: String,
      default: () => 'medium'
    },
    parameters: {
      type: String,
      default: () => ''
    },
    showLabel: {
      type: Boolean,
      default: () => false
    },
    value: {
      type: [String, Number, Array, Object],
      default: ''
    },
    disabled: {
      type: Boolean,
      default: () => false
    },
    width: {
      type: String,
      default: () => ''
    },
    placeholder: {
      type: String,
      default: () => '请选择'
    },
    requiredLogo: {
      type: Boolean,
      default: true
    },
    // 业务类型, 例如项目的 股权:equity 债券: debt ....
    selectBusType: {
      type: String,
      default: ''
    },
    // 是否开启权限范围控制
    scopeAuthority: {
      type: Boolean,
      default: () => false
    },
    clearable: {
      type: Boolean,
      default: () => true
    },
    isEcho: {
      type: Boolean,
      default: false,
      desc: '回显label'
    },
    viewShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataList: [],
      dataListBck: [],
      selectLoading: false,
      svalue: this.value,
      sLabel: ''
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.$nextTick(() => {
          if (newVal) {
            this.svalue = newVal
          } else {
            this.svalue = ''
            this.sLabel = ''
          }
        })
      },
      immediate: true
    },
    parameters(newVal, oldVal) {
      if (newVal !== oldVal) {
        // this.sLabel = ''
        this.dataList = []
        this.initDataList()
      }
      // if (oldVal !== '') {
      //   this.svalue = ''
      // }
    },
    svalue: {
      handler(newVal) {
        if (newVal) {
          this.$emit('input', this.svalue)
            this.getName(this.value)
        }
      },
      deep: true,
      immediate: true
    },
    selectBusType: {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.initDataList()
          })
        }
      }
    }
  },
  created() {

  },
  mounted() {
    this.initDataList()
  },
  methods: {
    remoteMethodDeal(query) {
      this.selectLoading = true
      const queryDeal = {
        pageSize: 30,
        pageNum: 1,
        dealIdList: (this.svalue !== Array) ? (this.isEmpty(this.svalue) ? [] : [this.svalue]) : (this.svalue.filter(i => i && i.trim())),
        dealName: query,
        dealType: this.selectBusType,
        scopeAuthority: this.scopeAuthority
      }
      findDealLimit(queryDeal).then(response => {
        this.dataList = (response.rows === null ? [] : response.rows)
        if (this.svalue) {
          this.getName(this.svalue)
        }
        this.selectLoading = false
      }).catch(() => {
        this.selectLoading = false
      })
    },
    initDataList() {
      // 查询项目
      if (this.parameters === 'deal') {
        this.remoteMethodDeal()
      }
      // 查询基金
      if (this.parameters === 'fund') {
        findFundFof({ scope: this.scopeAuthority }).then(response => {
          this.dataList = response.data
          if (this.svalue) {
            this.getName(this.svalue)
          }
        })
      }
      // 查询管理人
      if (this.parameters === 'manager') {
        findGp().then(response => {
          this.dataList = response.data
          if (this.svalue) {
            this.getName(this.svalue)
          }
        })
      }
      // 查询合伙企业
      if (this.parameters === 'hhqy') {
        findHhqy().then(response => {
          this.dataList = response.data
          if (this.svalue) {
            this.getName(this.svalue)
          }
        })
      }
      // 查询spv
      if (this.parameters === 'spv') {
        findSpvFund({ scopeAuthority: this.scopeAuthority }).then(response => {
          this.dataList = response.data
          if (this.svalue) {
            this.getName(this.svalue)
          }
        })
      }
      // 查询客户管理 - 出资人
      if (this.parameters === 'lpInvestor') {
        findLpList().then(Response => {
          this.dataList = Response.data
          if (this.svalue) {
            this.getName(this.svalue)
          }
        })
      }
      // 查询内部机构
      if (this.parameters === 'internal') {
        findInternal().then(Response => {
          this.dataList = Response.data
          if (this.svalue) {
            this.getName(this.svalue)
          }
          })
      }
      // 查询中介机构
      if (this.parameters === 'mediation') {
        findMediation().then(Response => {
          this.dataList = Response.data
          if (this.svalue) {
            this.getName(this.svalue)
          }
        })
      }
      // 查询外部专家
      if (this.parameters === 'experts') {
        findExperts().then(Response => {
          this.dataList = Response.data
          if (this.svalue) {
            this.getName(this.svalue)
          }
        })
      }
      // 管理人(内部加外部)
      if (this.parameters === 'managerAll') {
        findGpAll().then(response => {
          this.dataList = response.data
          if (this.svalue) {
            this.getName(this.svalue)
          }
        })
      }
    },
    getName(value) {
      const data = this.dataList.find(item => item.id === value)
      // 项目
      if (this.parameters === 'deal' && value) {
        if (data) {
          this.sLabel = data.dealName
          return data.dealName
        } else {
          getDealBase(value).then((res) => {
            if (res.code === 200 && res.data) {
              this.sLabel = res.data.dealName
            }
          })
        }
      }
      // 基金
      if ((this.parameters === 'fund' || this.parameters === 'spv') && value) {
        if (data) {
          this.sLabel = data.fundName || data.fundFullName
          return data.fundName || data.fundFullName
        } else {
          getFundBase(value).then((res) => {
            if (res.code === 200 && res.data) {
              this.sLabel = res.data.fundName || res.data.fundFullName
            }
          })
        }
      }
      // 管理人
      if (this.parameters === 'manager' && value) {
        if (data) {
          this.sLabel = data.name
          return data.name
        } else {
          getGpBase(value).then((res) => {
            if (res.code === 200 && res.data) {
              this.sLabel = res.data.name
            }
          })
        }
      }
      // 合伙企业
      if (this.parameters === 'hhqy' && value) {
        if (data) {
          this.sLabel = data.name
          return data.name
        } else {
          getHhqyBase(value).then((res) => {
            if (res.code === 200 && res.data) {
              this.sLabel = res.data.name
            }
          })
        }
      }
      // 出资人
      if (this.parameters === 'lpInvestor' && value) {
        if (data) {
          this.sLabel = data.name
          return data.name
        } else {
          getLpBase(value).then((res) => {
            if (res.code === 200 && res.data) {
              this.sLabel = res.data.name
            }
          })
        }
      }
      // 内部机构
      if (this.parameters === 'internal' && value) {
        if (data) {
          this.sLabel = data.interFullName
          return data.interFullName
        } else {
          getInternalBase(value).then((res) => {
            if (res.code === 200 && res.data) {
              this.sLabel = res.data.interFullName
            }
          })
        }
      }
      // 中介机构
      if (this.parameters === 'mediation' && value) {
        if (data) {
          this.sLabel = data.mediationName
          return data.mediationName
        } else {
          getByIdMainBody(value).then((res) => {
            if (res.code === 200 && res.data) {
              this.sLabel = res.data.mediationName
            }
          })
        }
      }
      // 外部专家
      if (this.parameters === 'experts' && value) {
        if (data) {
          this.sLabel = data.name
          return data.name
        } else {
          getExpertsBase(value).then((res) => {
            if (res.code === 200 && res.data) {
              this.sLabel = res.data.name
            }
          })
        }
      }
      // 管理人（内部加外部）
      if (this.parameters === 'managerAll' && value) {
        if (data) {
          this.sLabel = data.name
          return data.name
        } else {
          getGpBase(value).then((res) => {
            if (res.code === 200 && res.data) {
              this.sLabel = res.data.name
            }
          })
        }
      }
    },
    dataChange(e) {
      this.svalue = e
      const object = this.dataList.find(obj => obj.id === e)
      if (object) {
        this.$emit('input', this.svalue)
        this.$emit('change', e, this.getName(e), object)
        this.$emit('changeData', { svalue: e, name: this.getName(e), obj: object })
      } else {
        this.$emit('input', this.svalue)
        this.$emit('change', e, this.getName(e))
        this.$emit('changeData', { svalue: e, name: this.getName(e) })
      }
    }
  }
}
</script>
